<template>
	<view class="order-wrap" v-if="goods">
		<view class="goods-info">
			<view class="goods-title gradient-text ">{{ goods.title }}</view>
			<view class="goods-desc">{{ goods.desc }}</view>
			<view class="goods-price">原价：{{ goods.price }}元</view>
		</view>
		<view class="flex">			
			<view class="num-step">
				<text>数量：</text>
				<van-stepper :value="num" @change="onChange" />
			</view>
			<view class="count-price">
				合计金额：{{ totalPrice }}
			</view>
		</view>
		<view class="address-from">
			<view class="address-item">
				<view>联系人</view>
				<input type="text" v-model="contact" placeholder="请填写联系人"/>
			</view>
			<view class="address-item">
				<view>手机号</view>
				<input type="text" v-model="mobile" placeholder="请填写手机号"/>
			</view>
			<view class="address-item">
				<view>地址</view>
				<input type="text" v-model="address" placeholder="请填写地址" />
			</view>
			<view class="address-item">
				<view>门牌号</view>
				<input type="text" v-model="doorplate" placeholder="请填写门牌号" />
			</view>
		</view>
		<view class="submit-btn" @click="onSubmit">提交并支付</view>
		
	</view>
</template>

<script>
	import { mapState } from 'vuex'
	export default {
		data() {
			return {
				num: 1,
				totalPrice: '0.00',
				contactName: '',
				mobile: '',
				address: '',
				doorplate: '', // 门牌号
				sending: false, // 是否正在发送
			}
		},
		
		computed: {
			...mapState({
				goods: state => state.order.goods
			})
		},
		
		onLoad(option) {
			this.getGoodsById(option.id)
		},
		
		methods: {
			onChange(e) {
				console.log('cdssdsd', e)
			},
			
			getGoodsById(id) {
				this.$store.dispatch('order/getGoodsById', id).then(() => {
					this.totalPrice = this.goods.price
				})
			},
			
			onSubmit() {
				if (this.verify() && !this.sending) {
					this.sending = true
					this.$store.dispatch('order/createOrder', {
						contact: this.contactName,
						mobile: this.mobile,
						address: this.address,
						doorplate: this.doorplate
					}).then(res => {
						this.sending = false;
						if (res.res == '1') {
							uni.navigateTo({
								url: '/pages/order/order'
							});
						} else {
							uni.showToast({
								title: res.msg,
								duration: 3000,
								icon: 'none'
							})
						}
					})
				}
			},
			
			// 校验
			verify() {
				if (!this.contactName) {
					uni.showToast({
						title: '请输入联系人',
						duration: 3000,
						icon: 'none'
					})
					return false
				}
				if (!this.mobile) {
					uni.showToast({
						title: '请输入手机号',
						duration: 3000,
						icon: 'none'
					})
					return false
				}
				if (!this.address) {
					uni.showToast({
						title: '请输入地址',
						duration: 3000,
						icon: 'none'
					})
					return false
				}
				if (!this.doorplate) {
					uni.showToast({
						title: '请输入门牌',
						duration: 3000,
						icon: 'none'
					})
					return false
				}
				return true
			}
		}
	}
</script>

<style scoped lang="scss">
.order-wrap {
	background-color: #ededed;
	padding: 20rpx;
	height: 100vh;
}

.goods-info {
	background-color: #FFFFFF;
	border: 1px solid #169cbc;
	border-radius: 10rpx;
	padding: 20rpx;
	
	.goods-title {
		font-size: 40rpx;
	}
	
	.goods-desc {
		margin: 10rpx auto;
		font-size: 22rpx;
		line-height: 1.6;
		color: #7e7e7e;
	}
	
	.goods-price {
		font-size: 24rpx;
		color: #333333;
	}
}

.flex {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin: 40rpx 0;
	font-size: 22rpx;
	color: #575757;
}

.address-from {
	padding: 20rpx;
	
	.address-item {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 20rpx;
		background-color: #FFFFFF;
		border-radius: 20rpx;
		margin-bottom: 20rpx;
		
		view {
			width: 150rpx;
			color: #575757;
			font-size: 40rpx;
		}
		
		input {
			flex: 1;
			color: #575757;
		}
	}
}

</style>
